<template>
	<div class="black-listed-user-error-container" id="black-listed-user-error-container">
		<div class="content-wrapper">
			<div class="image">
				<img src="https://zealcomm-cn-assets.oss-cn-beijing.aliyuncs.com/black_headimg.png" style="width: 154px;height: 127px;">
			</div>
			<p class="title">{{ title }}</p>
			<p class="content" :style="{ width: content.length > 20 ? '188px' : '150px' }">
				{{ content }}
			</p>
			<button class="button" @click="close">确定</button>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		title: {
			type: String,
			default: '温馨提示'
		},
		content: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.black-listed-user-error-container {
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 108;
	text-align: center;
	pointer-events: auto;

	.content-wrapper {
		width: 241px;
		background: #ffffff;
		border-radius: 10px;
		margin: 0 auto;
		margin-top: 50%;
		padding-bottom: 22px;
		box-sizing: border-box;

		.image {
			width: 100%;
			height: 139px;
			border-radius: 10px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #FCF5F5;
		}

		.title {
			font-size: 15px;
			font-weight: bold;
			color: #242728;
			line-height: 21px;
			margin: 12px 0 8px 0;
		}

		.content {
			font-size: 12px;
			font-weight: 400;
			color: #7f8284;
			line-height: 17px;
			margin: 0 auto;
		}

		.button {
			margin-top: 25px;
			width: 145px;
			height: 42px;
			border: none;
			background: linear-gradient(180deg, #f94248 0%, #c7000b 100%);
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
			border-radius: 21px;
			font-size: 14px;
			font-weight: 500;
			color: #ffffff;
			line-height: 42px;
		}
	}
}
</style>
